<template>
	<div id='login'>
		<div class="div_login">

			<form method="post" id="login_form" >
				<div id="login_input">
					<!-- 用户名和密码 -->
					<div class="u_input" style="top:20px">
						<label for="username" class="label">用户名</label>
						<input type="text" id="username" placeholder="请输入用户名" v-model="user.username" />

					</div>
					<div class="u_input">
						<label for="password" class="label">密码</label>
						<input type="password" id="password" placeholder="请输入密码" v-model="user.password" />
					</div>

				</div>
				<!-- 身份 -->
				<div id="l_input">
					<label class="label">身份</label>
					<span><input type="radio" name="level" v-model="user.level" value="0"  />用户</span>

					<span><input type="radio" name="level" v-model="user.level" value="1" />管理员</span>
				</div>
				<!-- 验证码 -->
				<div id="c_input">
					<label class="label">验证码</label>
					<input type="text" placeholder="请输入验证码" v-model="code" id="code">
					<canvas id='canvas' width="130" height="34" ref="canvas" @click="createCode()"></canvas>
				</div>

				<input type="submit" id="login_submit" value="登录" @click.prevent="submitLogin">
			</form>
			<div id="other_login">
				<div class="other_info">

					<div class="other span_line1 "></div>
					<div class="other"><span class="span_font">其他登陆方式</span></div>
					<div class="other span_line2"></div>
				</div>
				<div class="icon">
					<div class="icon_qq"></div>

					<div class="icon_baidu"></div>

					<div class="icon_sina"></div>
				</div>

			</div>
		</div>



	</div>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					level:0
				},
				code: '',
				nowCode: '',
			}
		},
		
		beforeMount(){
			
		},
		methods: {
			submitLogin() {
				
				if(this.user.username == undefined || this.user.password == undefined){
					alert('请输入用户名密码');
					return;
				}
				if(this.code.toLowerCase() != this.nowCode){
					alert("验证码错误");
					this.createCode();
					return;
				}
				this.$axios.post('/api/user/login',this.user)
				.then((data)=>{
					if(data.status == 200){
						if(data.data.length == 0){
							alert('用户名或密码错误');
							return;
						}
						else{
							
							this.$store.commit('setStorage',data.data)
							this.$router.replace({
								path:'/main'
							})
							}
					}
				})
				.catch((err)=>{
					console.log(err)
				})
				
				
			},
			/* 创建验证码*/
			createCode() {
				this.nowCode = '';
				let canvas_width = this.$refs.canvas.width;
				let canvas_height = this.$refs.canvas.height;
				let canvas = this.$refs.canvas;
				canvas.height = canvas.height;
				let ctx = canvas.getContext('2d');

				ctx.width = canvas_width;
				ctx.height = canvas_height;
				let randomCode = new Array('0', '1', '2', '3', '4', '5', ' 6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g',
					'h', 'i', 'j', 'k', 'l',
					'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
					'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
					'X', 'Y', 'Z');
				let arrLength = randomCode.length;
				for (let i = 0; i < 6; i++) //显示4位 验证码
				{
					let j = randomCode[Math.floor(Math.random() * arrLength)];
					let deg = Math.random() - 0.5; //弧度
					this.nowCode += j.toLowerCase();
					let x = 10 + i * 20;
					let y = 20 + Math.random() * 5;
					ctx.font = 'bold 18px 宋体';
					ctx.translate(x, y);
					ctx.rotate(deg);
					ctx.fillStyle = this.randomColor();
					ctx.fillText(j, 0, 0);
					ctx.rotate(-deg);
					ctx.translate(-x, -y);
				}
				for (let i = 0; i < 20; i++) {
					ctx.strokeStyle = this.randomColor();
					ctx.beginPath();
					let x = Math.random() * canvas_width;
					let y = Math.random() * canvas_height;
					ctx.moveTo(x, y);
					ctx.lineTo(x + 1, y + 1);
					ctx.stroke();
				}

			},
			/*随机生成颜色*/
			randomColor() {
				let r = Math.floor(Math.random() * 256);
				let g = Math.floor(Math.random() * 256);
				let b = Math.floor(Math.random() * 256);
				return 'rgb(' + r + ',' + g + ',' + b + ')'
			}
		},
		mounted() {
			this.createCode();
		}
	}
</script>

<style lang="less" scoped>
	button:focus,input:focus{
		box-shadow: none;
		outline: lightblue solid 2px;
	}
	#login {
		position: relative;
		width: 100%;
		top: 72px;
		height: 100%;
		
		.div_login {
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: #fff;

			#login_form {
				position: absolute;
				width: 100%;
				height: 100%;

				#login_input {

					.u_input {
						width: 100%;

						input {
							position: absolute;
							left: 50%;
							transform: translateX(-50%);
							float: left;
							width: 350px;
							height: 40px;
							font-size: 20px;
							border: 1px solid #ccc;

							line-height: 40px;
							padding-left: 40px;


						}



						#username {
							background: url('../../assets/icon/username.png') no-repeat;
							background-size: 24px 24px;

							background-position: 4px 10px;
							background-color: #fff;
							top: 40px;
						}

						#password {
							background: url('../../assets/icon/password.png') no-repeat;
							background-size: 24px 24px;

							background-position: 4px 10px;

							background-color: #fff;
							top: 100px;
						}


					}
				}

				.label {
					position: absolute;
					-webkit-transform: translateX(-9999px);
					transform: translateX(-9999px);
				}



				.u_input:after {
					content: '';
					height: 0;
					visibility: hidden;
					clear: both;
					display: block;
				}

				#l_input {
					font-size: 20px;
					width: 400px;
					margin-top: 20px;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					top: 150px;					
					

					span {
						float: left;
					}
					input[type="radio"] {
						margin-left: 80px;
						margin-right: 30px;
					}
				}

				#c_input {
					position: absolute;
					top: 210px;
					width: 380px;
					left: 50%;
					transform: translateX(-50%);
					
					height: 52px;
					
					
					#code {
						width: 200px;
						height: 32px;

						float: left;
						
						border: 1px solid #ccc;
						font-size: 18px;

						background-color: #fff;
					}

					#canvas {
						border: 1px solid #ccc;
						float: left;
						margin-left: 35px;
					}
				}

				#login_submit {
					width: 150px;
					height: 50px;

					font-size: 22px;

					line-height: 50px;

					border: 1px solid #f5f5f5;
					position: absolute;
					
					left: 50%;
					transform: translateX(-50%);
					top: 270px;


					color: #f5f5f5;
					background-color: #367cff;

				}
			}

			#other_login {
				position: absolute;
				top: 340px;
				height: 100px;
				left: 50%;
				transform: translateX(-50%);
				width: 375px;


				.other_info {
					margin-left: 45px;
					

					.other {
						float: left;
						color: #757575;

						.span_font {
							font-size: 15px;

						}
					}
				}

				.span_line1,
				.span_line2 {
					border-bottom: 1px solid #ccc;

					width: 30%;
					height: 6px;

					display: inline;
				}

				.icon {
					width: 375px;

					height: 60px;

					position: relative;

					.icon_qq {
						width: 35px;
						height: 35px;
						position: absolute;
						top: 30px;
						left: 100px;
						background: url('../../assets/icon/qq.png') no-repeat;
						background-size: 26px 26px;
						background-position: 2px 8px;

					}

					.icon_baidu {
						width: 35px;

						height: 35px;

						position: absolute;
						top: 30px;

						left: 165px;

						background: url('../../assets/icon/baidu.png') no-repeat;
						background-size: 32px 32px;

						background-position: 2px 5px;

					}

					.icon_sina {
						width: 35px;

						height: 35px;

						position: absolute;
						top: 30px;

						left: 230px;

						background: url('../../assets/icon/sina.png') no-repeat;
						background-size: 32px 32px;

						background-position: 2px 5px;

					}
				}
			}
		}

	}
</style>
